import React, { Component } from 'react';
import styles from './index.module.scss';
import { Flex, PickerView } from 'antd-mobile';
import classNames from 'classnames';
import { getCurrentCity } from '../../utils/city';
import FilterFooter from '../../components/FilterFooter'
import { Spring } from 'react-spring/renderprops'

// 类型
const types = [
    { name: '区域', type: 'area' },
    { name: '方式', type: 'mode' },
    { name: '租金', type: 'price' },
    { name: '筛选', type: 'more' },
]
class Filter extends Component {
    constructor() {
        super()
        this.state = {
            // 
            conditionData: null,
            openType: "", //打开的类型
            selectTitleValue: {
                area: false, //区域
                mode: false, //方式
                price: false, //租金
                more: false, //筛选
            },
            pickerValues: { //PickerView
                area: [],
                mode: [],
                price: []
            },
            selectValue: {// 最终选中的值，这个值将来是要传递给HouseList组件
                area: ['area', 'null'], // 区域
                mode: ['null'], // 方式
                price: ['null'], // 租金
                more: [], // 筛选
            },
            moreValues: []
        }
    }
    // 渲染遮罩层
    renderMask = () => {
        const { openType } = this.state
        /* if (openType === '' || openType === "more") return null
        return <div className={styles.mask} onClick={() => { this.setState({ openType: "" }) }}></div> */
        //react-spring动画
        if (openType === "area" || openType === "mode" || openType === "price")
            return (
                <Spring config={{ duration: 250 }} from={{ opacity: 0 }} to={{ opacity: 1 }}>
                    {(props) => {
                        if (props.opacity === 0) {
                            return null
                        } else {
                            return (
                                <div style={props} className={styles.mask} onClick={this.cancelOpenType}>
                                </div>
                            )
                        }
                    }
                    }
                </Spring>
            )
    }
    dealWithFilterTitleHighLight = () => {
        let tempObj = {}
        Object.keys(this.state.selectValue).forEach(key => {
            if (key === "area") {
                tempObj['area'] = (this.state.selectValue.area.length > 1 && this.state.selectValue.area[1] != 'null')
            } else if (key === "mode") {
                tempObj['mode'] = (this.state.selectValue.mode.length > 0 && this.state.selectValue.mode[0] != 'null')
            } else if (key === "price") {
                tempObj['price'] = (this.state.selectValue.price.length > 0 && this.state.selectValue.price[0] != "null")
            } else if (key === 'more') {
                tempObj['more'] = this.state.selectValue.more.length > 0
            }
        })
        console.log(tempObj, "tempObj")
        this.setState({
            selectTitleValue: tempObj
        })
    }
    // 点击切换选中颜色
    toggleSelectType = (type) => {
        this.setState({
            openType: type,
            selectTitleValue: { ...this.state.selectTitleValue, [type]: true }
        })
    }
    // picker选择器选中变化
    changValue = value => {
        const { openType, pickerValues } = this.state
        console.log(value)
        pickerValues[openType] = value
        this.setState({
            pickerValues
        })
    }
    // dom元素刚加载生命周期
    componentDidMount() {
        this.getHouseConditionData()
    }
    getHouseConditionData = async () => {
        // 获取城市id
        const { value } = await getCurrentCity()
        const res = await this.axios(`/houses/condition?id=${value}`)
        this.setState({
            conditionData: res.data.body
        })
    }
    // 点击取消
    cancelOpenType = () => {
        this.setState({
            openType: "",
        }, () => {
            this.dealWithFilterTitleHighLight()
        })
    }
    // 渲染Picker组件
    renderFilterPicker = () => {
        const { openType, pickerValues, conditionData: { area, subway, price, rentType } } = this.state
        let data = []
        let value = []
        let cols = 3
        switch (openType) {
            case 'area':
                data = [area, subway]
                value = pickerValues['area']
                cols = 3
                break;

            case 'mode':
                data = rentType
                value = pickerValues['mode']
                cols = 1
                break;

            case 'price':
                data = price
                value = pickerValues['price']
                cols = 1
                break;
            default:
                break;
        }
        return <div>
            <PickerView onChange={this.changValue} value={value} data={data} cols={cols} />
            <FilterFooter onCancel={() => { this.cancelOpenType() }} onOk={() => {
                this.setState({
                    selectValue: { ...this.state.selectValue, ...this.state.pickerValues },
                    openType: ""
                }, () => {
                    this.dealWithFilterTitleHighLight()
                    // 将选中的值传送到houseList 组件中去 然后该页面拿选中的值发送请求,获取列表数据
                    this.props.onConditionChange(this.state.selectValue)
                })
            }} />
        </div>
    }
    // 渲染过滤标题
    renderFilterTitle = () => {
        const { selectTitleValue } = this.state
        return (
            <Flex className={styles.filterTitle}>
                {
                    types.map(item => {
                        const isSelect = selectTitleValue[item.type]
                        return <Flex.Item key={item.type} onClick={() => { this.toggleSelectType(item.type) }}>
                            <span className={classNames(styles.dropdown, { [styles.selected]: isSelect })} >
                                {item.name}
                                <i className="iconfont icon-arrow"></i>
                            </span>
                        </Flex.Item>
                    })
                }
            </Flex>
        )
    }
    // 切换选择每一项
    toggleSelectItem = (value) => {
        console.log("qiehuan")
        let oldMoreValues = this.state.moreValues
        if (oldMoreValues.includes(value)) {
            oldMoreValues = oldMoreValues.filter(item => item !== value)
        } else {
            oldMoreValues.push(value)
        }
        this.setState({
            moreValues: oldMoreValues
        })
    }
    // 渲染dd每一项
    renderDDitem = data => {
        const { moreValues } = this.state
        return (
            data.map((item) => {
                return <span key={item.value} onClick={() => this.toggleSelectItem(item.value)} className={classNames(styles.tag, { [styles.tagActive]: moreValues.includes(item.value) })}>
                    {item.label}
                </span>
            })
        )
    }
    // 渲染过滤组件
    renderFilterMore = () => {
        const { conditionData: { roomType, floor, oriented, characteristic } } = this.state
        return <div className={styles.filterMore}>
            <div onClick={() => { this.cancelOpenType() }} className={styles.filterMoreMask}></div>
            <div className={styles.tags}>
                <dl className={styles.dl}>
                    <dt className={styles.dt}>户型</dt>
                    <dd className={styles.dd}>
                        {this.renderDDitem(roomType)}
                    </dd>
                </dl>
                <dl className={styles.dl}>
                    <dt className={styles.dt}>朝向</dt>
                    <dd className={styles.dd}>
                        {this.renderDDitem(oriented)}
                    </dd>
                </dl>
                <dl className={styles.dl}>
                    <dt className={styles.dt}>楼层</dt>
                    <dd className={styles.dd}>
                        {this.renderDDitem(floor)}
                    </dd>
                </dl>
                <dl className={styles.dl}>
                    <dt className={styles.dt}>房屋亮点</dt>
                    <dd className={styles.dd}>
                        {this.renderDDitem(characteristic)}
                    </dd>
                </dl>
            </div>
            <div className={styles.filterMoreFooter}>
                <FilterFooter cancelText="清除" onCancel={() => this.setState({ moreValues: [] })} onOk={() => {
                    // 深拷贝
                    const moreValue = JSON.parse(JSON.stringify(this.state.moreValues))
                    this.setState({
                        selectValue: {
                            ...this.state.selectValue,
                            more: moreValue
                        },
                        openType: ''
                    }, () => {
                        // 处理高亮状态
                        this.dealWithFilterTitleHighLight()
                        // 将选中的值传送到houseList 组件中去 然后该页面拿选中的值发送请求,获取列表数据
                        this.props.onConditionChange(this.state.selectValue)
                    })
                }} />
            </div>
        </div>
    }
    render() {
        const { openType, conditionData } = this.state
        return (
            <div className={styles.root}>
                {/* 渲染遮罩 */}
                {this.renderMask()}
                <div className={styles.content}>
                    {/* 渲染FilterTitle */}
                    {this.renderFilterTitle()}
                    {/* 渲染FilterPicker */}
                    {conditionData && (openType == "area" || openType == "mode" || openType == "price") && this.renderFilterPicker()}
                    {/* 渲染FilterMore */}
                    {conditionData && openType == "more" && this.renderFilterMore()}
                </div>
            </div>
        );
    }
}

export default Filter;